iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Modern Web

你應該要知道的CSS技巧:發掘被忽略但實用的屬性系列 第 7

【Day07】快速改變表單預設色 - accent-color

  • 分享至 

  • xImage
  •  

accent-color

accent-color支援度:Can I Use)

每次在寫<input>總會需要特別去修改預設顏色甚至客製每個input樣式,
這時就可以用accent-color這個CSS屬性統一修改顏色

accent-color是什麼?

  • accent-color:CSS強調色屬性
  • 支援以下HTML Element
    • <input type="checkbox">
    • <input type="radio">
    • <input type="range">
    • <progress>

accent-color就可以直接修改支援的input顏色修改,就不用一個個再修改啦

:root{
  --accent-primary:rgb(var(--red),var(--green),var(--blue));
  accent-color: var(--accent-primary);
}

Codepen範例

IT15-Day07-accent-color

參考來源


上一篇
【Day06】我現在就想要!一鍵輸入主題色即可切換Theme - CSS Variables + calc() + rgb()
下一篇
【Day08】CSS也有巢狀結構了 - CSS Nesting
系列文
你應該要知道的CSS技巧:發掘被忽略但實用的屬性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言